import React from "react";
import {Button, Checkbox, Col, DatePicker, Form, Input, Row, Select} from 'antd';
import witty from "@/utils/wittyUtils";
import TextArea from "antd/es/input/TextArea";

const FormItem = Form.Item;
const {RangePicker} = DatePicker;

class FilterForm extends React.Component {

    handleFilterSubmit = (e) => {
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                return;
            }
            this.props.filterSubmit(fieldsValue);
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    initFormList = () => {
        const {getFieldDecorator} = this.props.form;
        let {handleType, formList} = this.props;
        const formItemList = [];

        let colLayout = this.props.colLayout;
        if (!colLayout) {
            colLayout = {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8
            }
        }

        let formItemLayout = this.props.formItemLayout;
        if (!formItemLayout) {
            formItemLayout = {}
        }

        if (formList && formList.length > 0) {
            formList.forEach((item, i) => {
                let label = item.label;
                let field = item.field;
                let initialValue = item.initialValue || '';
                let placeholder = item.placeholder;
                let rules = item.rules || [];
                let props = item.props || {};

                if (item.type == 'RANGEPICKER') {
                    const RANGEPICKER = <Col  {...colLayout} key={field}>
                        <FormItem label={label} key={field} {...formItemLayout}>
                            {
                                getFieldDecorator(field, {})(
                                    <RangePicker showTime={true} format={'YYYY-MM-DD'}
                                                 {...props} allowClear={true} style={{width: '100%'}}/>
                                )
                            }
                        </FormItem></Col>
                    formItemList.push(RANGEPICKER);
                } else if (item.type == 'INPUT') {
                    const INPUT = <Col  {...colLayout} key={field}>
                        <FormItem label={label} key={field} {...formItemLayout}>
                            {
                                getFieldDecorator(field, {
                                    initialValue: initialValue,
                                    rules: rules
                                })(
                                    <Input type={'text'} placeholder={placeholder}
                                           allowClear={true} {...props}/>
                                )
                            }
                        </FormItem></Col>
                    formItemList.push(INPUT);
                } else if (item.type == 'TEXT') {
                    const TEXT = <Col  {...colLayout} key={field}>
                        <FormItem label={label} key={field} {...formItemLayout}>
                            {
                                getFieldDecorator(field, {
                                    initialValue: initialValue,
                                    rules: rules
                                })(
                                    <TextArea allowClear={true} {...props}/>
                                )
                            }
                        </FormItem></Col>
                    formItemList.push(TEXT);
                } else if (item.type == 'SELECT') {
                    const SELECT = <Col  {...colLayout} key={field}>
                        <FormItem label={label} key={field} {...formItemLayout}>
                            {
                                getFieldDecorator(field, {
                                    initialValue: initialValue,
                                })(
                                    <Select
                                        allowClear={true}
                                        placeholder={placeholder}
                                        {...props}
                                    >
                                        {witty.getOptionList(item.list)}
                                    </Select>
                                )
                            }
                        </FormItem></Col>
                    formItemList.push(SELECT);
                } else if (item.type == 'CHECKBOX') {
                    const CHECKBOX = <Col  {...colLayout} key={field}>
                        <FormItem label={label} key={field} {...formItemLayout}>
                            {
                                getFieldDecorator(field, {
                                    valuePropName: 'checked',
                                    initialValue: initialValue
                                })(
                                    <Checkbox allowClear={true} {...props}>
                                        {label}
                                    </Checkbox>
                                )
                            }
                        </FormItem></Col>
                    formItemList.push(CHECKBOX);
                }
            })
        }
        return formItemList;
    }

    render() {
        let {formLayout, handleType, submitName} = this.props;

        if (!submitName) {
            submitName = '查询';
        }

        if (!formLayout) {
            formLayout = {
                layout: 'vertical',
                labelCol: {
                    xs: 24,
                    sm: 4
                },
                wrapperCol: {
                    xs: 24,
                    sm: 12
                }
            };
        }

        return (
            <Form {...formLayout}>
                <Row>
                    {this.initFormList()}
                </Row>
                {(handleType == 'detail') ? null :
                    <Row>
                        <Col span={24} style={{textAlign: 'center', height: '32px', lineHeight: '32px'}}>
                            <FormItem wrapperCol={{xs: 24, sm: 24, md: 24, lg: 24}}>
                                <Button type={'primary'} style={{margin: '0 20px'}}
                                        onClick={this.handleFilterSubmit}>{submitName}</Button>
                                <Button onClick={this.reset}>重置</Button>
                            </FormItem>
                        </Col>
                    </Row>
                }

            </Form>
        );
    }
}

export default Form.create({})(FilterForm);
